<template>
    <div class="outerDiv" @contextmenu.prevent @click="jumpToNext()">
        <div class="topDiv">

            <div class="topDiv_text">
                {{title}}
            </div>
        </div>
        <div class="midDiv">
            <div class="leftPart">
                <div v-if="count>0" class="imgDiv">
                <el-carousel height="1400px" indicator-position="none" :interval="carouselInterval">
                    <el-carousel-item v-for="item in pics" :key="item.index">
                        <img :src="item.url"/>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div v-else class="imgDiv">
                <img src="../assets/image/1.jpg"/>
            </div>

            </div>
            <div class="rightPart">
                <div class="rightPart_section1">
                    <div>请点击屏幕</div>
                    <div>扫条码投放</div>
                </div>

                <div class="rightPart_section2">
                    <img src="../assets/image/bottle.jpg" >
                </div>
                <div class="rightPart_section3">
                    <img src="../assets/image/lun.png" >
                </div>
            </div>

        </div>


        <div class="botDiv">
            <div class="botDiv_right">
                <img src="../assets/image/qrcode.png"/>
            </div>
        </div>



          <el-dialog
                :visible.sync="msgDialogVisible"
                :close-on-click-modal="false"
                :show-close="false"
                 width="400px"
                center>
          <span>

                <div class="msgText">{{errorMsg}}</div>
                <div class="msgText">{{serverMsg}}</div>


          </span>
        </el-dialog>


    </div>
</template>

<script>

    import {
        getToken,
        getAdv,
        checkState,
        SetMachineState,
        closeDoor,
    } from './../api/api'

    export default {
        name: "Advert",
        data() { //注意：data即使不需要传数据，也必须return,否则会报错
            return {
                machineCode: this.$config.machineCode,
                count: 0,
                carouselInterval: 6000,
                pics: [],
                title:this.$config.title,
                clickMsg:'点击屏幕开始投放',
                errorMsg:this.$config.errorMsg,
                serverMsg:this.$config.serverMsg,
                msgDialogVisible:false,
                msgInterval:6000,
                timer:'',
                advTimer:'',
            }

        },
        created() {
            getToken(this.$config.remote_url,this.$config.username,this.$config.password).then(
                (res)=>{

                    if(res==1)
                    {
                        alert(this.$config.neterrormsg);
                    }
                }
            );
            this.showAdv();
            this.getAdvInterval();
            closeDoor();

        },
        methods: {
            closeDoor(){
                setTimeout(function () {
                            closeDoor();
                        }, 310);
            },
            jumpToNext() {
                var that=this;
                checkState().then((res) => {
                    console.log(res.other);
                    if (res.other == "") {

                        if(that.timer)
                        {
                           clearTimeout(that.timer);
                        }
                        if(that.advTimer)
                        {
                            clearTimeout(that.advTimer);
                        }
                        that.$router.push("/scan").catch(() => {
                        });
                    } else {
                       // alert("设备出现故障，暂停使用！");
                        that.showMsg();
                        console.log("设备出现故障==！");
                        console.log("错误代码:" +res.other);
                        SetMachineState(that.$config.remote_url,that.machineCode, res.other).then((res) => {
                            console.log(res);
                        });
                    }

                }).catch((res)=>{
                    that.showMsg();
                });


            },

            showMsg()
            {
                var that=this;
                that.msgDialogVisible=true;
                that.timer = setTimeout(that.closeMsg,that.msgInterval);
            },
            closeMsg()
            {
                 var that=this;
                 that.msgDialogVisible=false;
            },
            //获取广告
            showAdv() {
                var that = this;
                that.advTimer =setTimeout(function(){
                    getAdv(that.$config.remote_url,that.machineCode).then((res) => {
                    that.count = res.length;
                    that.pics = res;
                });
                },that.msgInterval);

            },

            getAdvInterval() {
                var that = this;
                setInterval(function () {
                    that.showAdv();
                }, 1000 * 60);
            },
        }

    }
</script>

<style scoped>
    a:link {
        color: #2C3E50;
        text-decoration: none;
    }

    a:visited {
        color: #2C3E50;
        text-decoration: none;
    }

    .outerDiv {
        width: 100%;
        height: 100%;
        background-color: #F0FFF0;
    }

    .topDiv {
        line-height: 220px;
        height: 220px;
        text-align: center;
    }

    .topDiv_space {
        height: 50px;

    }

    .topDiv_text {
        font-size: 40px;
        color: #FF6600;
        height: 100px;
    }


    .midDiv {
        height: 1300px;
        display: flex;
        overflow: hidden;
    }
    .leftPart
    {
        flex: 3;
        margin-left: 50px;
    }
    .rightPart
    {
        flex: 2;
    }
    .botDiv {
        width: 100%;
        height: 150px;
        display: flex;
        padding-top: 100px;
        background-color: #F0FFF0;
    }


    .botDiv_right {
        flex: 1;
        text-align: center;
    }

    .imgDiv img {
        height: 1400px;
        width: 100%;
    }
    .msgText
    {
        text-align: center;line-height: 200%;
        font-size: 25px;
    }
    .rightPart_section1
    {
        font-size:50px;
        line-height: 150%;
        color: #00cc66;
        font-family: 方正琥珀简体;
    }
    .rightPart_section2
    {
        margin-top:200px;
        text-align: center;
    }
    .rightPart_section3
    {
        margin-top:200px;
        text-align: center;
    }
</style>